<template>
  <div class="box">
    <div class="main">
      <!-- 轮播 -->
      <div class="swiper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, index) in imgList"
              :key="index"
            >
              <img :src="item.src" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <!-- <div class="swiper-pagination"></div> -->
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

        <div class="swiper-bottom">
          <div
            class="bottom-text"
            v-for="(text, index) in text"
            :key="index"
            :class="{ active: currentIndex === index }"
            @click="chnangeIndex(index)"
          >
            {{ text.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="container">
      <!-- logo -->
      <div class="logo">
        <img
          src="	https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/07/01/141/1625109603058_2340x240_90.jpg"
          alt=""
        />
      </div>
      <div class="picList">
        <img
          src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/07/01/178/1625109790754_756x500_90.jpg"
          alt=""
        />
        <img
          src="	https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/07/01/20/1625109795981_756x500_90.jpg"
          alt=""
        />
        <img
          src="	https://h2.appsimg.com/b.appsimg.com/upload/momin/2021/07/01/116/1625109810533_756x500_90.jpg"
          alt=""
        />
      </div>
      <div class="daily">
        <img
          src="https://a.vpimg2.com/upload/flow/2018/08/17/154/15344789862278.jpg"
          alt=""
        />
      </div>
      <div class="categroylist">
        <div class="left">
          <img
            src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/12/14/86/1607914975921_1200x684_90.jpg"
            style="width:106%; height: 100%;"
            alt=""
          />
          <div class="box">
            <div class="item">
              <img src="./images/chenyi3.jpg" alt="" />
              <div class="brand">
                <img src="./images/brand1.png" alt="" />
              </div>
              <div class="tu">
                <div class="icon">特卖价</div>
                <div class="price">$99</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/chenyi2.jpg" alt="" />
              <div class="brand">
                <img src="./images/brand2.png" alt="" />
              </div>
              <div class="tu">
                <div class="icon">特卖价</div>
                <div class="price">$99</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/chenyi.jpg" alt="" />
              <div class="brand">
                <img src="./images/brand.png" alt="" />
              </div>
              <div class="tu">
                <div class="icon">特卖价</div>
                <div class="price">$99</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <img
            src="	https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/09/03/77/1599118052991_1140x684_90.jpg"
            style="width:100%; height: 100%;"
            alt=""
          />
          <div class="box">
            <div class="item">
              <img src="./images/txu.png" alt="" />
              <div class="top">热度Top1</div>
              <div class="bottom">
                <div class="text">连衣裙</div>
                <div class="hot">榜</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/lianyiqun.png" alt="" />
              <div class="top">热度Top1</div>
              <div class="bottom">
                <div class="text">连衣裙</div>
                <div class="hot">榜</div>
              </div>
            </div>
            <div class="item">
              <img src="./images/qunzi1.png" alt="" />
              <div class="top">热度Top1</div>
              <div class="bottom">
                <div class="text">连衣裙</div>
                <div class="hot">榜</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomlist">
        <img
          src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2020/09/04/131/1599185745041_2340x714_90.png"
          style="width:100%;height:100;"
          alt=""
        />
        <div class="box">
          <div class="item">
            <img src="./images/chenyi3.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
          <div class="item">
            <img src="./images/chenyi2.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand1.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
          <div class="item">
            <img src="./images/chenyi.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand2.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
          <div class="item">
            <img src="./images/chenyi3.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
          <div class="item">
            <img src="./images/chenyi.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand1.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
          <div class="item">
            <img src="./images/chenyi2.jpg" alt="" />
            <div class="brand">
              <img src="./images/brand2.png" alt="" />
            </div>
            <div class="tu">
              <div class="icon">特卖价</div>
              <div class="price">$99</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分列图片 -->
      <div class="goodslist">
        <div class="left">
          <img src="./images/good01.jpg" alt="" />
          <div class="text">
            <div class="num">4.7</div>
            <div class="zhe">折起</div>
            <div class="font">魅可MAC彩妆香水专场</div>
          </div>
        </div>
        <div class="left">
          <img src="./images/good02.jpg" alt="" />
          <div class="text">
            <div class="num">2.7</div>
            <div class="zhe">折起</div>
            <div class="font">玉兰油ONLY护肤各护专场</div>
          </div>
        </div>
        <div class="left">
          <img src="./images/good01.jpg" alt="" />
          <div class="text">
            <div class="num">4.7</div>
            <div class="zhe">折起</div>
            <div class="font">魅可MAC彩妆香水专场</div>
          </div>
        </div>
        <div class="left">
          <img src="./images/good02.jpg" alt="" />
          <div class="text">
            <div class="num">2.7</div>
            <div class="zhe">折起</div>
            <div class="font">玉兰油ONLY护肤各护专场</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "Home",
  data() {
    return {
      currentIndex: 0,
      imgList: [
        {
          src:
            "https://b.appsimg.com/upload/momin/2021/06/30/188/1625047111056.jpg",
          id: 1
        },
        {
          src:
            "https://b.appsimg.com/upload/momin/2021/07/01/100/1625129096364.jpg",
          id: 2
        }
      ],
      text: [
        { name: "国际风尚 全场低至1折" },
        { name: "太平鸟集团 全场低至1折七起" }
      ]
    };
  },
  mounted() {},
  methods: {
    chnangeIndex(index){
      // this.currentIndex=index
    }
  },
  watch: {
    swiper: {
      immediate: true,
      handler() {
        this.$nextTick(function() {
          let that = this;
          var mySwiper = new Swiper(".swiper-container", {
            loop: true, // 循环模式选项
            autoplay: {
              delay: 4000, //3秒切换一次
              disableOnInteraction: false
            },
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination"
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            },
            on: {
              slideChangeTransitionEnd: function() {
                // console.log(this.activeIndex)
                // console.log(this)//swiper组件
                // console.log(that)//vue组件
                that.currentIndex = this.realIndex;
              }
            }
          });
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 1170px;
  margin: 0 auto;
  position: relative;
  height: 2500px;
}
.main {
  width: 1950px;
  height: auto;
  margin: 0 auto;
  background-image: url(https://b.appsimg.com/upload/momin/2021/06/30/35/1625024057798.jpg);
  background-repeat: no-repeat;
  background-size: 100% 500px;
  height: 503px;
  position: relative;
  left: -388px;
}
.swiper {
  width: 1156px;
  height: 400px;
  position: absolute;
  cursor: pointer;
  top: 38px;
  left: 387px;
  border: solid 10px rgba(255, 250, 250, 0.7);
  border-bottom: none;
}
.swiper img {
  width: 1156px;
  height: 400px;
}
.swiper .swiper-bottom {
  height: 40px;
  width: 1176px;
  margin-left: -10px;
  display: flex;
  justify-content: center;
  border: solid 1px rgba(228, 224, 224, 0.7);
  border-top: none;
  line-height: 40px;
}
.swiper-bottom div {
  cursor: pointer;
  width: 225px;
  // background: pink;
  text-align: center;
}
.swiper-bottom .bottom-text {
  position: relative;
}
.swiper-bottom .active {
  border-bottom: 3px solid rgb(221, 13, 117);
}
.swiper-bottom :nth-child(1)::after {
  content: "";
  width: 1px;
  height: 20px;
  background: rgb(212, 207, 207);
  position: absolute;
  right: 0;
  top: 10px;
}
.container {
  width: 1170px;
  height: auto;
  // background:pink;
  margin: auto 0;
  position: relative;
  img {
    width: 100%;
    // height: 100%;
  }
  .logo {
    cursor: pointer;
  }
  .picList {
    height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: white;
  }
  .daily {
    margin: 20px 0;
  }
  .categroylist {
    height: 340px;
    div {
      cursor: pointer;
    }
    .left {
      width: 560px;
      height: 340px;
      float: left;
      border: solid 1px rgba(230, 227, 227, 0.7);
      position: relative;
      .box {
        width: 100%;
        height: 260px;
        position: absolute;
        // background: pink;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        .item {
          width: 170px;
          height: 250px;
          // background: powderblue;
          position: relative;
          &:nth-child(2) {
            background: #f6f6f6;
          }
          img {
            width: 170px;
            height: 180px;
          }
          .brand {
            position: absolute;
            bottom: 60px;
            left: 45px;
            background: white;
            img {
              width: 80px;
              height: 80px;
            }
          }
          .tu {
            display: flex;
            align-items: center;
            padding-left: 45px;
            box-sizing: border-box;
            margin-top: 30px;
            .icon {
              width: 50px;
              height: 30px;
              color: white;
              line-height: 30px;
              text-align: center;
              border-radius: 20px;
              background: #f03867;
            }
          }
        }
      }
    }
    .right {
      width: 570px;
      height: 340px;
      float: right;
      border: solid 1px rgba(230, 227, 227, 0.7);
      position: relative;
      .box {
        width: 100%;
        height: 260px;
        position: absolute;
        // background: pink;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        .item {
          width: 175px;
          height: 250px;
          background: #f2f2f2;
          position: relative;
          img {
            width: 175px;
            height: 210px;
          }
          .top {
            position: absolute;
            bottom: 55px;
            left: 25px;
            width: 120px;
            height: 30px;
            background: #d9b77a;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 20px;
          }
          .bottom {
            display: flex;
            align-items: center;
            .text {
              font-size: 16px;
              width: 130px;
              text-align: center;
              margin-left: 20px;
            }
            .hot {
              width: 20px;
              height: 20px;
              background: #f03867;
              color: white;
              line-height: 20px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  .bottomlist {
    width: 100%;
    height: 355px;
    // margin-top: 30px;
    // background: pink;
    cursor: pointer;
    position: relative;
    .box {
      width: 100%;
      height: 260px;
      position: absolute;
      // background: pink;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      .item {
        width: 170px;
        height: 250px;
        // background: powderblue;
        position: relative;
        &:nth-child(2) {
          background: #f6f6f6;
        }
        img {
          width: 170px;
          height: 180px;
        }
        .brand {
          position: absolute;
          bottom: 60px;
          left: 45px;
          background: white;
          img {
            width: 80px;
            height: 80px;
          }
        }
        .tu {
          display: flex;
          align-items: center;
          padding-left: 45px;
          box-sizing: border-box;
          margin-top: 30px;
          .icon {
            width: 50px;
            height: 30px;
            color: white;
            line-height: 30px;
            text-align: center;
            border-radius: 20px;
            background: #f03867;
          }
        }
      }
    }
  }
  .goodslist {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 370px;
    flex-wrap: wrap;
    .left {
      width: 48%;
      height: 370px;
    }
    .text {
      display: flex;
      font-weight: 700;
      font-size: 25px;
      align-items: center;
      line-height: 80px;
      .num {
        font-size: 30px;
        color: red;
      }
    }
  }
}
</style>
